<template>
  <div id="detail">
    <el-header height="30px" class="title">
      <img src="../assets/flight-logo.png" width="30px" style="margin:0 10px">
      <span> {{routeInfo.departCity}} => {{routeInfo.arriveCity}} </span>
      <span> 总时长 {{routeInfo.totalConsume}} 小时 </span>
    </el-header>
    <el-main>
      <el-collapse>
        <el-collapse-item :name="'No.' + item.order + ' ' + item.flightName" :title="item.flightName"
          v-for="(item,index) in routeInfo.flights" :key="index">
          <div class="flight-info flex j-s">
            <div>
              <div>
                <i class="el-icon-location-outline"></i>
                <span>
                  {{formatDateDHM(new Date(item.startTime))}} 起飞机场: {{item.start}}/{{item.startAir}}
                </span>
              </div>
              <div>
                <el-divider class="a1" direction="vertical"></el-divider>
                <i class="el-icon-time"></i>
                <span class="flight-time">
                  飞行约 {{item.consume}} 小时
                </span>
              </div>
              <div>
                <i class="el-icon-location"></i>
                <span>
                  {{formatDateDHM(new Date(item.endTime))}} 到达机场: {{item.end}}/{{item.endAir}}
                </span>
              </div>
            </div>
          </div>
          <div class="flex j-e f-b">￥{{item.price}}</div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
    <el-footer>
      <div class="price flex j-e">￥{{routeInfo.totalPrice}}</div>
    </el-footer>
  </div>
</template>

<script>
export default {
  props: {
    routeInfo: {
      totalPrice: Number,
      totalConsume: Number,
      departPort: String,
      arrivePort: String,
      departTime: Date,
      arriveTime: Date,
      flights: [
        {
          order: Number,
          start: String,
          end: String,
          startAir: String,
          endAir: String,
          startTime: String,
          endTime: String,
          flightName: String,
          price: String,
          consume: Number
        }
      ],
      departCity: String,
      arriveCity: String
    }
  },
  name: "PlaneDetail",
  data() {
    return {};
  },
  methods: {
    formatDateDHM(date) {
      // 获取日期 时间
      var MM = date.getMonth() + 1;
      if (MM < 10) MM = "0" + MM;
      var DD = date.getDate();
      if (DD < 10) DD = "0" + DD;
      const hour = date.getHours();
      var h = hour > 10 ? hour : "0" + hour;
      const min = date.getMinutes();
      var m = min > 10 ? min : "0" + min;
      return MM + "-" + DD + " " + h + ":" + m;
    }
  }
};
</script>

<style>
.a1 {
  min-width: 3px;
  min-height: 5em;
  margin: 0;
}
.title {
  font-size: 20px;
  font-weight: bolder;
}
.flex {
  display: flex;
}
.j-s {
  justify-content: space-between;
}
.j-e {
  justify-content: flex-end;
}
.f-b {
  font-weight: 500;
}
.flight-info {
  text-align: left;
  font-size: 18px;
}
.flight-time {
  color: grey;
}
.el-collapse-item__header {
  font-weight: bold !important;
}
.price {
  color: #ff7d13;
  font-size: 24px;
  font-weight: 700;
}
</style>
